<script setup lang="ts">
import { QBtn } from "quasar";
import { computed } from "vue";

import {} from "qqlx-core";
import {} from "qqlx-cdk";

const vueProps = defineProps<{
  active?: boolean;
  accent?: boolean;
  negative?: boolean;

  loading?: boolean;
  disabled?: boolean;
  type?: string;
}>();

const classes = computed(() => {
  const base = { class: `rounded px-2.5` };
  if (vueProps.accent) base.class += ` bg-accent text-white`;
  else if (vueProps.active) base.class += " bg-primary text-white";
  else if (vueProps.negative) base.class += " bg-negative text-white";
  else base.class += " text-info bg-white";

  return base.class;
});
</script>

<template>
  <q-btn
    :type="vueProps.type || 'button'"
    :class="classes"
    :outline="!(vueProps.accent || vueProps.active)"
    :loading="vueProps.loading"
    :disabled="vueProps.disabled"
    unelevated
  >
    <slot></slot>
  </q-btn>
</template>

<style></style>
